<template>
  <div class="login">
      <div class="login-box">
        <div class="login-head">
            <img src="../../static/login-t.png" />
        </div>
        <div class="login-con">
            <p class="title">用户登录</p>
            <div class="form-inp">
              <span class="ico">
              <img src="../../static/ico1.png" /></span>
              <input type="text" class="inp" placeholder = "请输入登录ID" />
            </div>
            <div class="form-inp">
              <span class="ico">
              <img src="../../static/ico2.png" /></span></span>
              <input type="text" class="inp"  placeholder = "请输入密码" />
            </div>
            <div class="form-check">
              <span>
                <input type="checkbox" />
                 记住密码
              </span>
                <a href="javascript:;" class="fw">忘记密码</a>
              
            </div>
            <input type="submit" value="登录" class="submit-btn"/>
        </div>
      </div>
   
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    width:100%;
    height:100%;
    background: #0f2028 url(../../static/loginbg.jpg) no-repeat center center;
    background-size: 100% 100%;
  }
  .login-box{
    width:580px;
    position:absolute;
    left: 50%;
    top:50%;
    margin-left:-290px;
    margin-top:-300px;
    height:600px;
  }
  .login-head{
    padding-bottom:40px;
  }
    .login-head img{
      max-width:100%;
    }
  .login-con{
    width:580px;
    height:360px;
    background:url(../../static/login-box.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .title{
    text-align:center;
    color:#00e1eb; 
    padding:20px 0;
    font-size:24px;
  }
  .form-inp{
    border:2px solid #00e1eb;
    width:360px;
    margin:0 auto 20px;
    background:rgba(34,86,88,.6);
    height:40px;
    line-height:40px;
    display:flex;
    align:center;
  }
  .form-inp .ico{
    width:40px;
    height:30px;
    padding:0 10px;
  }
  .form-inp .inp{
    height:36px;
    width:300px;
    line-height:36px;
    padding-left:10px;
    background:transparent;
    color:#fff;
  }
.form-inp .inp::-webkit-input-placeholder { 
      color: #efefef;
      font-size: 12px;   
}
.form-check{
   width:360px;
    margin:0 auto 20px;
    display:flex;
    justify-content:space-between;
    color:#00e1eb;
}
.fw{
  color:#00e1eb;
  
}
.submit-btn{
  color:#fff;
  width:360px;
  margin:0 auto 20px;
  background:#00e1eb;
  display:block;
  font-size:16px;
  padding:10px 0;
}
</style>
